<template>
  <view class="records" @click="toDetail(item)">
    <view class="records-item" :style="isListSty ? 'width:100%;margin: 20rpx 0 0 0;' : ''">
      <view class="records-item-head">
        <view class="buildding">
          <!-- <image src="@/static/images/index/build.svg	" mode=""></image> -->
          <view :class="isListSty ? 'isListSty' : ''">
            <view v-if="typeIdx == 0 && !hideDate">
              {{ ["维保签字时间", "完成时间:", "完成时间:", "完成时间:", "完成时间:", "报警时间:", "完成时间:",][tabIdx] }}
              {{
                tabIdx == 0
                  ? dateStringFilter(item.maintainSignatureTime) :
                  dateStringFilter(tabIdx == 5 ? item.createTime : tabIdx == 6 ? item.planEndTime : item.updateTime)
              }}
            </view>
            <view v-if="typeIdx == 1">
              计划时间
              {{
                dateStringFilter(item.planDate, 10)
              }}
            </view>
          </view>
        </view>
        <!-- 这里是历史  typeIdx 0=> 历史  1>任务安排 -->
        <view v-if="typeIdx == 0">
          <view class="status" v-if="item.typeStatus == 1">
            <image :src="statusHistory[item.status].icon"></image>
            <view :style="{ color: statusHistory[item.status].color }">{{
              item.statusDesc
            }}</view>
          </view>
          <view class="status" v-if="item.typeStatus != 1 || (item.planStatus && [3, 4, 5].includes(tabIdx))">
            <image src="@/static/images/index/s4d.png"></image>
            <view>{{ [5].includes(tabIdx) ? ["", "", "", "签字完成", "已完成", "已救援"][item.planStatus]
              :
              ["", "签字完成", "已完成", "已救援", "已完成"][item.planStatus || item.typeStatus]
            }}</view>
          </view>
        </view>
        <!-- 这里是任务安排 -->
        <view v-if="typeIdx == 1">
          <view class="status" v-if="tabIdx == 0">
            <image :src="statusBy[item.status].icon"></image>
            <view :style="{ color: statusBy[item.status].color }">{{
              item.statusDesc
            }}</view>
          </view>
          <view class="status" v-if="tabIdx == 1">
            <image v-if="statusWx[item.status].icon" :src="statusWx[item.status].icon"></image>
            <view :style="{ color: statusWx[item.status].color }">{{
              statusWx[item.status].text
            }}</view>
          </view>
          <view class="status" v-if="tabIdx == 2">
            <image v-if="statusPj[item.status].icon" :src="statusPj[item.status].icon"></image>
            <view :style="{ color: statusPj[item.status].color }">{{
              statusPj[item.status].text
            }}</view>
          </view>
          <view class="status" v-if="tabIdx == 3">
            <image v-if="statusRescue[item.planStatus].icon" :src="statusRescue[item.planStatus].icon"></image>
            <view :style="{ color: statusRescue[item.planStatus].color }">{{
              statusRescue[item.planStatus].text
            }}</view>
          </view>
        </view>

      </view>

      <view class="records-item-content">
        <view class="tagDesc">
          <view class="left">
            <view class="tags" v-if="tabIdx == 0">
              <!-- 电梯详情->保养计划 -->
              <!-- 电梯详情->维保历史->保养 -->
              <!-- 电梯详情->日历->保养计划 -->
              <tags-component label="保养：" displayCount="6" :templateNames="item.templateNames" />
            </view>
            <view class="tags" v-if="tabIdx == 1">
              <view class="lable">维修：</view>
              <view class="tag" v-if="item.partsName">{{ sliceStr(item.partsName) }}</view>
              <template v-if="item.problemItemNames">
                <view class="tag" v-for="tag in item.problemItemNames" :key="tag">{{ tag }}</view>
              </template>
            </view>
            <view class="tags" v-if="tabIdx == 2">
              <view class="lable">配件：</view>
              <view class="lab blue">{{ item.parts }}</view>
              <view class="lab blue">数量:{{ item.num }}</view>
            </view>

            <view class="rescueTag" v-if="tabIdx == 5">
              <view class="label">困人:</view>
              <view class="rescue_right">{{ item.trapDesc || item.planDesc || "-" }}</view>
              <!-- <view class="tag">{{
                item.trapType == 1 ? "伤人" : "困人"
              }}</view> -->
            </view>

            <block v-if="[3, 4].includes(tabIdx)">
              <view class="tags">
                <view class="label">{{ ["工单类型:", "工单类型:"][tabIdx - 3] }} </view>
                <view class="tag noBorder">{{ ["事务工单", "质量检查"][tabIdx - 3] }}</view>
              </view>
              <view class="tags_desc">
                <view class="lable_tit">{{ ["任务描述:", "任务描述:"][tabIdx - 3] }}</view>
                <text class="lable_desc">{{ item.planDesc }}</text>
              </view>
            </block>

            <block v-if="tabIdx == 6">
              <view class="tags">
                <view class="label">工单类型:</view>
                <view class="tag noBorder">整改工单</view>
              </view>
              <view class="tags_desc">
                <view class="lable_tit">整改事项</view>
                <text class="lable_desc">{{ item.scoreIssue }}</text>
              </view>
            </block>

            <!-- <view class="tags" v-if="tabIdx == 3">
              <view class="lable">困人:</view>
              <view class="">{{ item.trapDesc || "-" }}</view>
            </view> -->
            <view class="tags noMargin" v-if="item.emerProcType && ![3, 4, 5, 6].includes(tabIdx)">

              <text class="emerProcTag" v-for="(it, i) in btnBoxList" :key="i" v-show="item.emerProcType == it.key"
                :style="{ color: it.color, borderColor: it.color, }">
                {{ it.label }}
              </text>

            </view>
          </view>

          <view class="right" v-if="item.planContentUserVos && item.planContentUserVos.length <= 2
          ">
            <view v-for="(user, uIdx) in item.planContentUserVos.slice(0, 2)" :key="uIdx" :class="['menber']" :style="{
              background: !user.signUser.isPlanStatus
                ? '#b9b9b9'
                : userinfo.nick_name === user.signUser.userName
                  ? '#0091ff'
                  : '#00C6C0',
            }">
              <view></view>
              <text v-if="item.status > 2 && item.typeStatus != 4">
                <!-- {{ item.status }} -->
                {{
                  user.signUser.userName.length > 2
                    ? user.signUser.userName.slice(-2)
                    : user.signUser.userName
                }}
              </text>
              <text v-else-if="user.userName">{{
                user.userName.length > 2
                  ? user.userName.slice(-2)
                  : user.userName
              }}</text>
            </view>

            <image v-if="item.planContentUserVos.length > 2" src="@/static/images/down.png" mode="">
            </image>
          </view>
          <zb-tooltip @handchange="handchange($event, parentIdx, childIdx)" :items="item" @click.stop
            v-if="item.planContentUserVos && item.planContentUserVos.length > 2" placement="bottom" background="#fff"
            :right="20" :topS="40" color="#333" :showIcon="false">
            <view class="right">
              <view v-for="(user, uIdx) in item.planContentUserVos.slice(0, 2)" :key="uIdx" :class="['menber']" :style="{
                background: (!user.signUser || !user.signUser.isPlanStatus)
                  ? '#b9b9b9'
                  : (user.signUser && userinfo.nick_name === user.signUser.userName)
                    ? '#0091ff'
                    : '#00C6C0',
              }">
                <text v-if="item.status > 1 && item.typeStatus != 4 && user.signUser">
                  {{
                    user.signUser.userName.length > 2
                      ? user.signUser.userName.slice(-2)
                      : user.signUser.userName
                  }}
                </text>
                <text v-else>{{
                  user.userName.length > 2
                    ? user.userName.slice(-2)
                    : user.userName
                }}</text>
              </view>
              <image v-if="item.planContentUserVos.length > 2"
                :style="item.usermore ? 'transform: rotate(180deg);' : ''" src="@/static/images/down.png" mode="">
              </image>
            </view>
            <view class="userlist" slot="content">
              <view v-for="(user, uIdx) in item.planContentUserVos" :key="uIdx" class="userlist-item">
                <view :class="['menber']" :style="{
                  background: (!user.signUser || !user.signUser.isPlanStatus)
                    ? '#b9b9b9'
                    : (user.signUser && userinfo.nick_name === user.signUser.userName)
                      ? '#0091ff'
                      : '#00C6C0',
                }">
                  <text v-if="item.status > 1 && item.typeStatus != 4 && user.signUser">
                    {{
                      user.signUser.userName.length > 2
                        ? user.signUser.userName.slice(-2)
                        : user.signUser.userName
                    }}
                  </text>
                  <text v-else>{{
                    user.userName.length > 2
                      ? user.userName.slice(-2)
                      : user.userName
                  }}</text>
                </view>
                <view class="userlist-item-name" :style="!user.signUser || !user.signUser.isPlanStatus
                  ? 'color: #999999;'
                  : 'color: #333'
                  ">
                  <text>{{ user.userName }}</text>
                </view>
              </view>
            </view>
          </zb-tooltip>

          <!-- 保养整改单独处理-->
          <view class="right"
            v-if="tabIdx == 6 && item.planFinishUserNames && item.planFinishUserNames.split('/').length <= 2">
            <view v-for="(user, uIdx) in item.planFinishUserNames.split('/')" :key="uIdx" :class="['menber']"
              style="background:#b9b9b9">
              <view></view>
              <text>
                {{ user.length > 2 ? user.slice(-2) : user }}
              </text>
            </view>
          </view>
          <zb-tooltip @handchange="handchange($event, parentIdx, childIdx)" :items="item" @click.stop
            v-if="tabIdx == 6 && item.planFinishUserNames && item.planFinishUserNames.split('/').length > 2"
            placement="bottom" background="#fff" :right="20" :topS="40" color="#333" :showIcon="false">
            <view class="right">
              <view v-for="(user, uIdx) in item.planFinishUserNames.split('/').slice(0, 2)" :key="uIdx"
                :class="['menber']" style="background:#b9b9b9">
                <text>
                  {{ user.length > 2
                    ? user.slice(-2)
                    : user }}
                </text>
              </view>
              <image v-if="item.planFinishUserNames && item.planFinishUserNames.split('/').length > 2"
                :style="item.usermore ? 'transform: rotate(180deg);' : ''" src="@/static/images/down.png" mode="">
              </image>
            </view>
            <view class="userlist" slot="content">
              <view v-for="(user, uIdx) in item.planFinishUserNames.split('/')" :key="uIdx" class="userlist-item">
                <view :class="['menber']" style="background:#b9b9b9">
                  <text>
                    {{
                      user.length > 2
                        ? user.slice(-2)
                        : user
                    }}
                  </text>
                </view>
                <view class="userlist-item-name">
                  <text>{{ user.length > 2
                    ? user.slice(-2)
                    : user }}</text>
                </view>
              </view>
            </view>
          </zb-tooltip>
        </view>
      </view>
      <!-- 延期保养操作 -->
      <view class="delate"
        v-if="tabIdx == 0 && ((item.timeliness && item.timeliness.indexOf('超时') != -1) || (item.isDeferred === 1 && item.timeliness != '及时'))">
        <view class="labs" v-if="tabIdx == 0">
          <view class="lab" v-if="item.overdueName">
            {{ item.overdueName }}
          </view>
          <view class="lab other">
            {{ item.timeliness }}</view>
          <!-- <view class="lab" v-if="item.isDeferred === 1">延期保养</view> -->
          <!-- <view class="lab" v-if="(item.deferType === 1 || item.deferType === 5) ">{{item.deferType === 1?'已延期':'特殊延期'}} </view> -->
        </view>
        <!-- <view class="labs" v-if="tabIdx == 2">
          <view class="label">配件:</view>
          <view class="lab blue">{{ item.parts }}</view>
          <view class="lab blue">数量:{{ item.num }}</view>
        </view> -->
      </view>
      <view class="delate" v-if="tabIdx == 0 && (item.deferType === 1 || item.deferType === 5)">
        <view class="labs" v-if="tabIdx == 0">
          <view class="lab">{{ item.deferType === 1 ? "已延期" : "特殊延期" }}
          </view>
        </view>
      </view>

      <view class="handle" v-if="showTurnBtn && typeIdx === 1">
        <view class="handle_btn" @click.stop="handleMore(item, item.typeStatus, item.planId)">更多操作</view>
      </view>
    </view>

    <!-- 延期保养对话框start -->
    <uni-popup ref="deferredPopup">
      <view class="popup">
        <view class="title">延期保养</view>
        <view class="content">
          <view>此任务将推迟到</view>
          <view class="delay_date">
            <text>{{ tomorrowDate + "(明天)" }}</text>
            执行
          </view>
          <view class="delay_detail">
            <view>{{ item.buildingName + item.elevatorAddress }}</view>
            <view>{{ contentList.join(",").replace(/,/g, "+") }}</view>
          </view>
        </view>
        <view class="bottom">
          <view @click="$refs.deferredPopup.close()">取消</view>
          <view class="comfire" @click="rescueComfire">确认</view>
        </view>
      </view>
    </uni-popup>
    <!-- 延期保养对话框end -->
  </view>
</template>

<script>
import { getContent } from '@/apis/index.js';
import { formatTime } from '@/utils/utils.js';
import { setRescue } from '@/apis/rescue.js';
import { mapState } from 'vuex';
import dayjs from 'dayjs';

// 多标签组件
import tagsComponent from '@/components/tagsComponents/index';

export default {
  components: { tagsComponent },
  props: {
    item: {
      type: Object,
    },
    hideDate: {
      type: Boolean,
      default: false,
    },

    tabIdx: {
      type: Number,
      default: 0,
    },
    typeIdx: {
      type: Number,
      default: 0,
    },
    userMore: {
      type: Boolean,
      default: false,
    },
    elevatorId: {
      type: String,
    },
    parentIdx: {
      type: Number,
    },
    childIdx: {
      type: Number,
    },
    isListSty: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState('user', ['userinfo']),
    showTurnBtn() {
      let flag = false;

      if (this.item.auditType === 1) {
        // 非年审梯
        // 如果是待处理//非年审梯
        if (
          this.item.status === 1 &&
          (!this.item.timeliness || this.item.timeliness == '及时')
        ) {
          flag = true;
        }
      } else {
        // 如果是待处理//年审梯
        if (
          this.item.status === 1 &&
          (!this.item.timeliness || this.item.timeliness == '及时')
        ) {
          flag = true;
          // 年审梯 已延期特殊延期过 不显示更多按钮
          if (this.item.planDate) {
            if (
              (this.item.deferType === 1 || this.item.deferType === 5) &&
              new Date(this.item.planDate.replaceAll('-', '/')).getTime() /
              1000 ===
              new Date(dayjs().format('YYYY/MM/DD')).getTime() / 1000
            ) {
              flag = false;
            }
          }
        }
      }

      return flag;
    },
  },
  data() {
    return {
      // 紧急程度标签
      btnBoxList: [
        { color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4', },
        { color: '#F7B500', bgColor: '#fff7e1', label: '普通', key: '3', },
        { color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: '2', },
        { color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1', },
      ],
      statusHistory: {
        // 保养状态列表
        1: {
          text: '待开始',
          color: '#16BF99',
          icon: '/static/images/index/1.png',
        },
        2: {
          text: '进行中',
          color: '#0091ff',
          icon: '/static/images/index/2.png',
        },
        3: {
          text: '已提交',
          color: '#F7B500',
          icon: '/static/images/index/3.png',
        },
        4: {
          text: '签字完成',
          color: '#333',
          icon: '/static/images/index/s4d.png',
        },
        5: {
          text: '维保签字',
          color: '#333',
          icon: '/static/images/index/5n.png',
        },
      },
      statusBy: {
        // 保养状态列表
        1: {
          text: '待开始',
          color: '#16BF99',
          icon: '/static/images/index/1.png',
        },
        2: {
          text: '进行中',
          color: '#0091ff',
          icon: '/static/images/index/2.png',
        },
        3: {
          text: '已提交',
          color: '#F7B500',
          icon: '/static/images/index/3.png',
        },
        4: {
          text: '已完成',
          color: '#333',
          icon: '/static/images/index/s4d.png',
        },
        5: {
          text: '签字完成',
          color: '#fa6400',
          icon: '/static/images/index/5.png',
        },
      },
      statusWx: {
        // 维修状态
        1: {
          text: '待开始',
          color: '#16BF99',
          icon: '/static/images/index/1.png',
        },
        2: {
          text: '待开始',
          color: '#16BF99',
          icon: '/static/images/index/1.png',
        },
        3: {
          text: '进行中',
          color: '#0091ff',
          icon: '/static/images/index/2.png',
        },

        4: {
          text: '已完成',
          color: '#333',
          icon: '/static/images/index/s4d.png',
        },
        5: {
          text: '已关闭',
          color: '#999',
          icon: '',
        },
        6: {
          text: '已驳回',
          color: '#999',
          icon: '',
        },
      },
      statusPj: {
        // 配件状态
        5: {
          text: '待开始',
          color: '#16BF99',
          icon: '/static/images/index/1.png',
        },
        6: {
          text: '更换中',
          color: '#0091ff',
          icon: '/static/images/index/2.png',
        },

        7: {
          text: '已完成',
          color: '#333',
          icon: '/static/images/index/s4d.png',
        },
        9: {
          text: '已关闭',
          color: '#999',
          icon: '',
        },
        8: {
          text: '已驳回',
          color: '#999',
          icon: '',
        },
      },
      statusRescue: {
        // 配件状态
        1: {
          text: '调度中',
          color: '#16BF99',
          icon: '/static/images/index/1.png',
        },
        3: {
          text: '已出发',
          color: '#0091ff',
          icon: '/static/images/index/2.png',
        },

        4: {
          text: '已到达',
          color: '#0091ff',
          icon: '/static/images/index/2.png',
        },
        5: {
          text: '已救援',
          color: '#999',
          icon: '',
        },
      },
      tomorrowDate: formatTime(new Date().getTime() + 24 * 60 * 60 * 1000),
      contentList: [],
    };
  },
  created() {
    console.log(this.item, this.typeIdx, this.tabIdx, "eason7878");
  },
  methods: {
    sliceStr(str) {
      if (str.length >= 15) {
        str = str.slice(0, 15) + '...';
      }
      return str;
    },
    // 延迟保养
    handleDelay(item, type) {
      console.log(item);
      uni.showActionSheet({
        itemList: [type == 1 ? '延期保养' : '转单'],
        success: async (res) => {
          if (res.tapIndex == 0) {
            this.contentList = await this.fetchTemContent();
            this.$refs.deferredPopup.open();
          }
        },
        fail() { },
      });
    },
    // 更多操作 年审和非年审跳转
    handleMore(item) {
      if (
        this.item.planContentUserVos &&
        this.item.planContentUserVos.length > 0
      ) {
        let result = this.item.planContentUserVos.some(
          (it) => it.userId === this.userinfo.user_id
        );
        if (!result) {
          uni.showModal({
            title: '提示',
            content: '你没有权限操作该任务',
            showCancel: false,
            confirmText: '我知道了',
            success: (res) => {
              if (res.confirm) {
                console.log('用户点击确定');
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            },
          });
          return;
        }
      }

      let arr = ['延期保养', '提前保养'];
      if (
        item.status === 1 &&
        (!item.timeliness || item.timeliness == '及时')
      ) {
        // 待开始+未逾期
        if (item.auditType === 2) {
          // 年审类型
          arr = ['延期保养'];
          if (item.deferType === 5 || item.deferType === 1) {
            // 被特殊年审延期过后
            arr = ['提前保养'];
          }
        }

        if (item.auditType === 1) {
          // 非年审类型
          if (item.planDate) {
            if (
              new Date(item.planDate.replaceAll('-', '/')).getTime() / 1000 <=
              new Date().getTime() / 1000
            ) {
              // 小于等于今天任务的日期只显示延期
              arr = ['延期保养'];
            }
          }
        }

        uni.showActionSheet({
          itemList: arr,
          success: async (res) => {
            let needObj = {
              planId: this.item.planId,
              buildingAddress:
                this.item.buildingName + this.item.elevatorAddress,
              planCheckName: this.item.templateNames
                ? this.item.templateNames[0]
                : '',
              planDate: this.item.planDate,
              auditType: this.item.auditType,
            };
            if (this.item.auditType === 1) {
              // 非年审
              let str = '';
              if (res.tapIndex === 0) {
                // 去延期保养页面
                str =
                  '/pageModules/yearTrial/calendarEdit?needObj=' +
                  JSON.stringify(needObj) +
                  '&nums=' +
                  1;
              }
              if (res.tapIndex === 1) {
                // 去提前保养页面
                str =
                  '/pageModules/yearTrial/calendarEdit?needObj=' +
                  JSON.stringify(needObj) +
                  '&nums=' +
                  2;
              }
              uni.navigateTo({
                url: str,
              });
            }
            if (item.auditType === 2) {
              // 年审
              if (res.tapIndex == 0 && arr[0] === '延期保养') {
                uni.navigateTo({
                  url:
                    '/pageModules/yearTrial/yearDelay?needObj=' +
                    JSON.stringify(needObj),
                });
              }
              if (res.tapIndex == 0 && arr[0] === '提前保养') {
                uni.navigateTo({
                  url:
                    '/pageModules/yearTrial/calendarEdit?needObj=' +
                    JSON.stringify(needObj) +
                    '&nums=' +
                    3,
                });
              }
            }
          },
          fail() { },
        });
      }
    },
    fetchTemContent() {
      return new Promise((resolve) => {
        getContent({ planId: this.item.planId })
          .then((res) => {
            resolve(res.data);
          })
          .catch((resolve) => {
            resolve([]);
          });
      });
    },
    // 延期保养
    rescueComfire() {
      setRescue({ id: this.item.planId, isDeferred: 1 }).then((res) => {
        // console.log(res,'延期保养')
        if (res) {
          uni.showToast({
            title: '延期成功',
            icon: 'none',
          });
          this.$refs.deferredPopup.close();
          this.$emit('update');
        }
      });
    },
    handchange(val, parentIdx, childIdx) {
      // this.list[index].usermore = val;
      // console.log(val,index);
      // eslint-disable-next-line vue/custom-event-name-casing
      this.$emit('userMore', { val, parentIdx, childIdx });
    },
    dateStringFilter(date, len) {
      if (!date) {
        return '';
      } else {
        if (len) {
          date = date.slice(0, len);
        }

        return date.replaceAll('-', '/');
      }
    },
    // 去工单详情
    toDetail(item) {
      console.log(item, 9999);
      if (item.typeStatus == 2) {
        // 维修详情
        uni.navigateTo({
          url:
            '/subpages/repair/repariDetail?planId=' +
            item.planId +
            '&elevatorId=' +
            this.elevatorId,
        });
      }
      // 配件更换
      if (item.typeStatus == 4) {
        console.log('配件跳转');
        uni.navigateTo({
          url: `/subpages/workOrders/partOrder?planId=${item.planId}&elevatorId=${this.elevatorId}`,
        });
      }
      // 配件更换
      // if (item.typeStatus == 4) {
      //   uni.navigateTo({
      //     url: `/subpages/workOrders/partOrder?planId=${item.planId}&elevatorId=${this.elevatorId}`,
      //   });
      // }
      if (item.typeStatus == 1) {
        // 保养详情
        // let objs = {
        // 	overdueName: item.timeliness,
        // 	planCheckName: item.templateNames && item.templateNames.join(","),
        // }
        let overdueName = item.timeliness;
        let planCheckName = item.templateNames && item.templateNames.join(',');
        uni.navigateTo({
          url: `/subpages/workOrders/detail?planId=${item.planId}&elevatorId=${this.elevatorId}&overdueName=${overdueName}&planCheckName=${planCheckName}`,
        });
      }

      if (item.typeStatus == 3) {
        uni.navigateTo({
          url: `/subpages/rescue/rescueDetail?type=1&planId=${item.planId}&elevatorId=${this.elevatorId}`,
        });
      }
      // 事务
      if (item.typeStatus === 5) {
        uni.navigateTo({
          url: `/subpages/repair/affair/affairDetail?planId=${item.planId}&elevatorId=${this.elevatorId}`,
        });
      }
      // 质检
      if (item.typeStatus === 6) {
        uni.navigateTo({
          url: `/subpages/quality/qualityDetail?planId=${item.planId}&elevatorId=${this.elevatorId}`,
        });
      }

      // 整改
      if (item.typeStatus === 9) {
        uni.navigateTo({
          url: `/subpages/correction/detail?planId=${item.planId}&elevatorId=${this.elevatorId}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.records {
  width: 100%;
  color: #333;

  &-item {
    width: calc(100% - 40rpx);
    margin: 20rpx;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(177, 177, 177, 0.5);

    &-head {
      display: flex;
      color: #333333;
      font-size: 26rpx;
      justify-content: space-between;
      align-items: center;
      // align-items: baseline;
      border-bottom: 2rpx solid #eeeeee;
      padding: 20rpx;

      .buildding {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex: 1;
        color: #999;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 7rpx;
          padding-top: 5rpx;
        }

        view {
          flex: 1;
          line-height: 38rpx;
        }

        .isListSty {
          font-size: 24rpx;
        }
      }

      .status {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 160rpx;
        color: #333;

        image {
          width: 32rpx;
          padding-top: 3rpx;
          height: 32rpx;
          margin-right: 7rpx;
        }
      }
    }

    .tagDesc {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: flex-start;
      padding-bottom: 10rpx;
      // padding-top: 26rpx;
      // padding-bottom: 32rpx;
    }

    .delate {
      padding: 0 20rpx;
      padding-bottom: 20rpx;

      .labs {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: baseline;

        .label {
          font-size: 26rpx;
          color: #666;
          margin-right: 16rpx;
        }

        .lab {
          font-size: 24rpx;
          color: #e02020;
          background: #ffe3e3;
          padding: 0rpx 13rpx;
          border-radius: 4rpx;
          margin: 8rpx 0;
          margin-right: 8rpx;
        }

        .other {
          background: #fdf1e9;
          color: #fa6400;
        }

        .blue {
          color: #0091ff;
          background: #dcf0ff;
        }
      }
    }

    &-content {
      padding: 0rpx 20rpx;
      display: flex;
      align-items: center;
      // padding-bottom: 12rpx;
      position: relative;

      .left {
        flex: 1;

        .name {
          font-size: 32rpx;
          font-weight: bold;
        }

        .tags {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: baseline;
          font-size: 26rpx;
          color: #666;
          margin: 16rpx 0;
          margin-bottom: 0;
          position: relative;

          .tag {
            border: 2rpx solid #cccccc;
            border-radius: 20rpx;
            font-size: 24rpx;
            padding: 0rpx 13rpx;
            margin: 8rpx 0;
            margin-right: 12rpx;
            color: #333;
          }

          .noBorder {
            border: none;
          }

          .lab {
            font-size: 24rpx;
            color: #e02020;
            background: #ffe3e3;
            padding: 0rpx 13rpx;
            border-radius: 4rpx;
            margin: 8rpx 0;
            margin-right: 8rpx;
          }

          .blue {
            color: #0091ff;
            background: #dcf0ff;
          }

          .emerProcTag {
            font-size: 24rpx;
            border: solid 2rpx transparent;
            padding: 0 13rpx;
            border-radius: 8rpx;
            margin: 8rpx 0;
          }
        }

        .noMargin {
          margin: 0;
        }

        .tags_desc {
          display: flex;
          font-size: 26rpx;
          color: #666;

          .lable_tit {
            white-space: nowrap;
          }

          .lable_desc {
            width: 400rpx;
            margin-left: 16rpx;
            margin-bottom: 16rpx;
            color: #333;
          }
        }

        .rescueTag {
          display: flex;
          font-size: 26rpx;
          color: #666;
          margin-bottom: 32rpx;
          margin-top: 26rpx;

          .label {
            // margin-right: 16rpx;
            width: 76rpx;
          }

          .rescue_right {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        width: 72px;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-top: 16rpx;

        .menber {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20rpx;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background-color: #0091ff;
          color: #fff;
          margin-left: 4rpx;
        }

        image {
          width: 25rpx;
          height: 25rpx;
          margin-left: 5rpx;
          transition: 0.3s all;
        }
      }

      .userlist {
        &-item {
          display: flex;
          align-items: center;
          width: 180rpx;
          margin-bottom: 17rpx;

          .menber {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rpx;
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            background-color: #0091ff;
            color: #fff;
            margin-left: 4rpx;
            margin-right: 14rpx;
          }

          &-name {
            font-size: 24rpx;
            color: #333;
            overflow: hidden;
            flex: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        &-item:last-child {
          margin-bottom: 0;
        }
      }
    }

    &-bottom {
      padding: 20rpx;
      border-top: 2rpx solid #eeeeee;
      color: #999999;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .handle {
    padding: 0 16rpx;
    height: 68rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 2rpx solid #eeeeee;

    .handle_btn {
      height: 36rpx;
      padding: 0 30rpx;
      border: 2rpx solid #cccccc;
      border-radius: 4rpx;
      color: #333;
      font-size: 24rpx;
      display: flex;
      align-items: center;
    }
  }

  .popup {
    padding: 24rpx 28rpx 0 28rpx;
    box-sizing: border-box;
    background-color: #fff;
    width: 506rpx;
    border-radius: 16rpx;

    .title {
      color: #333;
      font-size: 32rpx;
      font-weight: 500;
      padding-bottom: 20rpx;
    }

    .content {
      text-align: center;
      color: #333;
      margin-bottom: 38rpx;

      .delay_date {
        margin-bottom: 16rpx;
        font-size: 28rpx;

        text {
          color: #0091ff;
        }
      }

      .delay_detail {
        color: #999;
        font-size: 24rpx;
      }
    }

    .bottom {
      display: flex;
      border-top: 2rpx solid #f5f5f5;
      height: 76rpx;

      view {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #999;
      }

      .comfire {
        color: #0091ff;
        border-left: 2rpx solid #f5f5f5;
      }
    }
  }
}
</style>
